<template>
	<view class="temList">
		<template v-for="(item,index) in list">
			<view class="box" :key="item.teamId" @click.native="showMsg(item,index)">
				<view class="left">
					<view class="top f18 overflow-ellipsis">{{item.teamName}}</view>
					<view>
						<view class="f12 left_projectName"><text
								class="margin-right12">{{item.member.length}}/{{item.teamNum}}</text>
							<text>{{item.projects?item.projects[0].projectName : item.teamProjectName }}</text>
						</view>
						<view class="img">
							<template v-for="item in item.memberAvatar">
								<avatar class="margin-right5 margin-top5" :name="item" />
							</template>


						</view>

					</view>
				</view>
				<view class="right">
					<view class="tag-view">
						<template v-for="tag in item.tags">
							<view class="mjcTag" :key="tag">{{tag}}</view>
						</template>
					</view>
				</view>
			</view>

		</template>
		<view class="bot" v-if="done && list.length > 0">没有了</view>
		<view class="bot" v-if="done && list.length == 0">
			<notFoundData />
		</view>
	</view>

</template>
</view>
</template>

<script>
	import avatar from '@/components/common/avatar/index.vue'
	import notFoundData from '@/components/notFoundData/index.vue'
	import tag from '@/components/tag/index.vue'
	export default {
		components: {
			tag,
			notFoundData,
			avatar
		},
		data() {
			return {
				done: false,
				item: null,
				list: [],
				total: 0,
				formData: {
					tags: null,
					teamType: null,
					teamName: null,
					teamProjectName: null,
					type: null,
					pageNum: 1,
					pageSize: 10
				}
			}
		},
		methods: {
			reloadSearch(data) {
				this.total = 0
				this.item = null
				this.list = []
				this.done = false
				this.formData.pageNum = 1
				//

				this.formData.tags = data.tags.length == 0 ? null : data.tags
				this.formData.teamType = data.teamType || null
				this.formData.teamName = data.teamName || null
				this.formData.teamProjectName = data.teamProjectName || null
				this.formData.type = data.type == 0 ? 0 : (data.type == null ? null : data.type)
				console.log(this.formData, 69);
				this.$nextTick(() => {
					this.getData()
				})
			},
			showMsg(item) {
				if (!this.$varitfyToken()) {
					this.$errMessageToast('请绑定五邑大学账号')
					
					return
				}
				if (!this.$token) {
					this.$errMessageToast('请绑定五邑大学账号')
					console.log('$errMessageToast');
					return
				}
				this.item = item
				uni.navigateTo({
					url: '/pages/organizeTeam/src/temListMsg',
				});
			},
			async getData() {
				const data = {
					...this.formData
				}

				try {
					const result = await this.$mjcrequest.request({
						url: this.$api.findAllTeam,
						data: JSON.stringify(data),
						header: this.$aplsjsonheader
					})
					this.total = result.total
					//没数据
					if (result.total == 0) {
						this.done = true
						this.list = []
						this.$emit('updateTeamListDone')
						this.$emit('cloesNgnationLoading')
						console.log(this.list, 82);
						return
					}
					//一页
					this.list = this.filterList(result)
					if (result.total <= 10) {
						this.done = true
						this.$emit('updateTeamListDone')
						this.$emit('cloesNgnationLoading')
						return
					}
					//至少两页
					this.$nextTick(() => {
						this.$emit('updateTotal', result.total)
					})

				} catch (e) {
					this.$errMessageToast(e)
					//TODO handle the exception
				}
			},
			filterList(list) {
				//处理列表数据
				const newList = list.pageDate.map(item => {
					return {
						...item,
						memberAvatar: item.member.map(item => {

							return item.substring(item.indexOf('-') + 1, item.length)
						})
					}
				})
				return newList
			},
			temListMsgSend() {
				this.$eventBus.$emit('temListMsgSend', this.item)
			},
			async pagination(page, done) {
				try {
					const limit = 10

					this.formData.pageNum = page
					console.log(page, 'page');
					const data = {
						...this.formData
					}
					const result = await this.$mjcrequest.request({
						url: this.$api.findAllTeam,
						data: JSON.stringify(data)
					})
					this.list = [...this.list, ...this.filterList(result)]
					this.$emit('cloesNgnationLoading')
					console.log(this.list, 77);
					if (done) {
						this.done = true
						this.$emit('updatetemListnDone')
						return
					}
				} catch (e) {
					//TODO handle the exception
					this.$errMessageToast(e)
				}
			},
		},
		created() {
			this.$eventBus.$on('temListMsg', () => {
				this.temListMsgSend()
			})
			//eventBus
			this.$eventBus.$on('teamListReload', ({
				page,
				done
			}) => {
				console.log(done, 'done');
				this.pagination(page, done)
			})

			this.getData()
		},
		destroyed() {
			this.$eventBus.$off('teamListReload')
			this.$eventBus.$off('temListMsg')
		}
	}
</script>

<style lang="less" scoped>
	.temList {
		padding: 15rpx;

		.bot {
			text-align: center;
			color: #dedfdf;
			font-size: 14px;
		}

		.img {
			display: flex;
			flex-wrap: wrap;

			& image {
				max-width: 25rpx;
				max-height: 25rpx;
				width: 25rpx;
				height: 25rpx;
				overflow: hidden;
				border-radius: 50%;
			}
		}

		.box {
			margin: 25rpx 0;
			width: 100%;
			max-height: 150rpx;

			background-color: #fff;
			border-radius: 15rpx;
			padding: 10rpx 20rpx 15rpx 20rpx;
			box-sizing: border-box;
			font-weight: 550;
			display: flex;
			box-shadow: 0 4px 8px 2px #f0f1f1 !important;

			.left {
				width: 50%;
				overflow: auto;

				&_projectName {
					white-space: nowrap;
				}
			}

			.right {
				width: 50%;
				box-sizing: border-box;

				.tag-view {
					width: 100%;
					height: 100%;
					flex-wrap: wrap;
					white-space: pre-wrap;
					word-wrap: break-word;
					text-align: right;
					display: flex;
					align-items: center;
					overflow: auto;

					.mjcTag {
						padding: 5rpx;
						color: #2979ff;
						border-color: #2979ff;
						border-radius: 2px;
						font-size: 12px;
						line-height: 14px;
						border-width: 1rpx;
						border-style: solid;
						font-weight: 300;
						display: inline-block;
						margin: 12rpx;
					}
				}


			}

		}
	}
</style>
